<template>
  <!-- checkbox -->
  <f7-page>
    <f7-navbar title="复选框" back-link="返回" no-hairline no-shadow></f7-navbar>

    <f7-list>
      <!-- Additional "checkbox" prop to enable checkbox list item -->
      <f7-list-item checkbox value="check_1" title="Checkbox 1" @change="onChange"></f7-list-item>
      <f7-list-item checkbox value="check_2" title="Checkbox 2" @change="onChange"></f7-list-item>
    </f7-list>

    <f7-block-title>爱好</f7-block-title>
    <f7-block>
      <p>
        <f7-checkbox value="篮球" @change="onChange"></f7-checkbox> <span class="margin-left">篮球</span>
      </p>

      <p>
        <f7-checkbox value="游泳" @change="onChange"></f7-checkbox> <span class="margin-left">游泳</span>
      </p>
    </f7-block>
  </f7-page>
</template>

<script>
export default {
  name: 'Checkbox',
  methods: {
    onChange({ target }) {
      this.$ui.toast(target.checked ? `已选中: ${target.value}` : `取消选中: ${target.value}`);
    }
  }
}
</script>